<template>
	<div class="record">
		<van-pull-refresh v-model="state.refresh" @refresh="onRefresh">
			<div class="total" v-if="state.total">{{ `共有${state.total}条记录` }}</div>
			<van-list
				:loading="state.loading"
				:finished="state.finished"
				:finished-text="state.list?.length !== 0 ? '———— 已经到底了哦 ————' : '' "
				@load="getList"
			>
				<div class="lists" v-if="state.list?.length">
					<component
						:is="typeItem"
						v-for="item in state?.list"
						:key="item.id"
						:details="item"
					/>
				</div>
				<component
					:is="empty"
					v-if="!state.list?.length && !state.loading"
				/>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup>
import { reactive, nextTick, watch, onMounted } from 'vue'
import empty from '@/components/empty'
import { useLoginStore } from '@/store'
import typeItem from './components/typeItem'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { checkLog } from '@/service/village'

const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)
const route = useRoute()
const router = useRouter()

const state = reactive({
	loading: false,
	finished: false,
	refreshing: false,
	isEmpty: false,
	total: 0,
	page: 1,
	pageSize: 10,
	list: []
})

const onRefresh = () => {
	state.list = []
	state.page = 1
	state.refresh = false
	state.loading = false
	state.finished = true
	nextTick(() => {
		state.finished = false
	})
}

const getList = async () => {
	const params = {
		pageindex: state.page -  1,
		limit: state.pageSize,
		text: route.query.id,
		checktime: JSON.parse(route.query.date)
	}
	if (+route.query.type === 3) {
		params.pczt = 2
	} else {
		params.yhly = +route.query.type
	}

	try {
		state.loading = true
		const result = await checkLog(params)
		state.loading = false
		state.list = [...state.list, ...result.data.items]
		state.total = result.data.total
		if (state.page * state.pageSize >= state.total) {
			state.finished = true
		}
		state.page++
	} catch (err) {
		state.loading = false
		state.finished = true
	}
}
</script>

<style scoped lang="less">
.record {
	.total {
		height: 82px;
		line-height: 82px;
		text-align: center;
		color: #696969;
	}
}
</style>
